<template>
  <view>
    <nav-bar title="训练计划" :showLeftIcon="false"></nav-bar>
    <view class="top-card">
      <view
        class="card"
        v-if="showCard"
        :style="{ background: `url(${baseImgUrl}/userImg/img_plan_card_bg.png) no-repeat` }"
      >
        <view class="card-content">
          <view class="card-title">定制康复训练计划</view>
          <view class="card-desc">全方位评估，为您制定专属康复计划</view>
        </view>
        <!-- <view class="card-btn">去定制</view> -->
        <!-- <view class="close-icon" @click="clickCloseCard">
          <uni-icons type="closeempty" color="#115BAA" size="18"></uni-icons>
        </view> -->
      </view>
      <!-- <view class="top-tab">
        <view
          :class="['tab-item', tabActive === 'progress' ? 'active-item' : '']"
          @click="clickTabItem('progress')"
        >
          进行中
          <view class="bottom-line" v-if="tabActive === 'progress'"></view>
          <view class="tab-bg" v-if="tabActive === 'progress'">
            <image class="bg-img" :src="baseImgUrl + '/userImg/img_left_tab.png'" />
          </view>
        </view>
        <view
          :class="['tab-item', tabActive === 'success' ? 'active-item' : '']"
          @click="clickTabItem('success')"
        >
          已完成
          <view class="bottom-line" v-if="tabActive === 'success'"></view>
          <view class="tab-bg" v-if="tabActive === 'success'">
            <image class="bg-img" :src="baseImgUrl + '/userImg/img_right_tab.png'" />
          </view>
        </view>
      </view> -->
    </view>
    <you-scroll
      :loadingHeight="loadingHeight"
      :mainHeight="scrollHeight"
      :isAllData="isAllData"
      :isRequestSuccess="isRequestSuccess"
      outPaddingTop="30rpx"
      backgroundColor="linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%)"
      @onRefresh="onRefresh"
      @loadMore="loadMore"
    >
      <template>
        <view v-if="isLoading" class="common-loading">
          <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
          正在加载数据，请稍后......
        </view>
        <view class="common-no-data" v-else-if="!planList || planList.length === 0">
          <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
          <view class="text">您还没有训练计划哦~</view>
        </view>
        <view v-else>
          <plan-list
            :planList="planList"
            itemBackground="linear-gradient(180deg, #eff4fd, #FFFFFF, #FFFFFF, #FFFFFF)"
            :showBoxShadow="true"
            :btnConfig="btnConfig"
          ></plan-list>
        </view>
      </template>
    </you-scroll>
    <view class="custom-service" @click="clickCustom">
      <image
        class="custom-img"
        :src="baseIconUrl + '/commonIcon/icon_custom_service.png'"
        mode="aspectToFill"
      />
    </view>
    <tab-bar :selectedIndex="1"></tab-bar>
  </view>
</template>

<script>
  import PlanList from '../subPages/components/planList.vue'
  import { baseImgUrl, baseIconUrl } from '@/config'
  import api_user from '@/api/user'
  export default {
    name: 'UserTrainPlan',
    components: { PlanList },
    data() {
      return {
        baseImgUrl,
        baseIconUrl,
        showCard: true,
        tabActive: 'progress', // progress 进行中，success 已完成
        loadingHeight: '',
        scrollHeight: '',
        isAllData: false,
        isRequestSuccess: false,
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        planList: [],
        btnConfig: {
          1: [
            { name: '去反馈', funcName: 'clickToFeedback' },
            { name: '查看详情', funcName: 'clickUserDetail' },
          ],
          2: [
            { name: '查看详情', funcName: 'clickUserDetail' },
          ],
          3: [
            { name: '我的评估报告', funcName: 'clickMyAssess' },
            { name: '查看详情', funcName: 'clickUserDetail' },
          ]
        }
      }
    },
    onShow() {
      uni.hideTabBar()
      this.scrollHeight = this.$store.getters.heightData.mainHeight - 120 + 'px'
      this.loadingHeight = this.$store.getters.heightData.mainHeight - 140 + 'px'
      this.pageNum = 1
      this.planList = []
      this.isLoading = true
      this.getPlanList()
      uni.setStorageSync('saveVideoList', null)
      uni.setStorageSync('videoScrollTop', 0)
      uni.setStorageSync('videoPageNum', 1)
    },
    methods: {
      clickCloseCard() {
        this.showCard = false
      },
      // clickTabItem(value) {
      //   this.tabActive = value
      //   this.pageNum = 1
      //   this.planList = []
      //   this.getPlanList()
      // },
      getPlanList() {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          userId: uni.getStorageSync('allUserInfo').sysUserid
        }
        api_user.fetchPlanList(params).then(res => {
          this.isLoading = false
          this.isRequestSuccess = true
          if (res.code !== 200) return
          this.planList.push(...res.rows)
          this.total = res.total
        }).catch(err => {
          this.isLoading = false
          this.isRequestSuccess = true
        })
      },
      // 下拉刷新
      onRefresh() {
        this.pageNum = 1
        this.planList = []
        this.isAllData = false
        this.isRequestSuccess = false
        this.getPlanList()
      },
      // 上拉加载
      loadMore() {
        if (this.planList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.getPlanList()
        } else {
          this.isAllData = true
        }
      },
      clickCustom() {
        uni.navigateTo({ url: '/subPages/userIndex/freeScreening/index?title=在线客服' })
      }
    }
  }
</script>
<style lang="scss">
  .top-card {
    position: relative;
    padding-top: 30rpx;
    height: 104px;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      background: linear-gradient(180deg, #5992E3 0%, #F8F8F8 100%);
      z-index: -3;
    }
    .card {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin: 0 30rpx 30rpx;
      padding: 36rpx 30rpx 34rpx;
      border-radius: 16rpx;
      background-size: cover;
      .card-content {
        .card-title {
          margin-bottom: 12rpx;
          font-size: 32rpx;
          font-weight: 500;
        }
        .card-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
      .card-btn {
        width: 130rpx;
        height: 48rpx;
        border-radius: 24rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 24rpx;
        color: #FFF;
        background-color: #115BAA;
      }
      .close-icon {
        position: absolute;
        top: 18rpx;
        right: 18rpx;
      }
    }
    .top-tab {
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 46px;
      border-radius: 32rpx 32rpx 0 0;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 32rpx 32rpx 0 0;
        background: linear-gradient(180deg, #c7dcf9 0%, #ffffff 100%);
        z-index: -2;
      }
      .tab-item {
        position: relative;
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #999;
        .bottom-line {
          position: absolute;
          bottom: 0;
          width: 60rpx;
          height: 8rpx;
          border-radius: 4rpx;
          background-color: #115BAA;
        }
        .tab-bg {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 100rpx;
          z-index: -1;
          .bg-img {
            width: 100%;
            height: 100rpx;
          }
        }
      }
      .active-item {
        color: #333;
      }
    }
  }
  .custom-service {
    width: 96rpx;
    height: 96rpx;
    position: fixed;
    bottom: 270rpx;
    right: 16rpx;
    z-index: 9999;
    .custom-img {
      width: 100%;
      height: 100%;
    }
  }
</style>
